<template>
  <div
    class="show_avatar"
    :class="{ show_circle: shape === 'circle' }"
    :style="{ width: width, height: height, 'background-image': 'url(' + backImg + ')', border: border }"
    @click="clickImg"
  />
</template>
<script>
export default {
  name: 'ShowAvatar',
  props: {
    src: {
      type: String,
      required: true
    },
    width: {
      type: String,
      required: false,
      default: '100px'
    },
    height: {
      type: String,
      required: false,
      default: '100px'
    },
    border: {
      type: String,
      required: false,
      default: ''
    },
    shape: {
      type: String,
      required: false,
      default: 'shape' // circle
    }
  },
  data() {
    return {
      backImg: ''
    };
  },
  watch: {
    src() {
      this.backImg = this.src;
    }
  },
  created() {
    this.backImg = this.src;
  },
  methods: {
    clickImg() {
      this.$emit('click');
    }
  }
};
</script>
<style scoped>
.show_circle {
  border-radius: 50%;
}
.show_avatar {
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
  vertical-align: middle;
}
</style>
